<template>
  <div class="scoreLine">
    <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
      <!-- 院校分数线 -->
      <el-tab-pane label="院校分数线" name="first">
        <div class="select-box select-box-1">
          <!-- 年份 -->
          <el-select
            :popper-options="{
              modifiers: [
                { name: 'computeStyles', options: { adaptive: false } },
              ],
            }"
            no-data-text="暂无数据"
            v-model="selecttextDX1"
            placeholder=" "
            @change="yearChange('c', selecttextDX1)"
            style="width: 90px"
          >
            <el-option
              v-for="item in popArrDX1"
              :key="item"
              :label="item"
              :value="item"
            />
          </el-select>

          <!-- 省份 -->
          <el-select
            :popper-options="{
              modifiers: [
                { name: 'computeStyles', options: { adaptive: false } },
              ],
            }"
            no-data-text="暂无数据"
            @change="provinceChange('c', selecttextDX2)"
            v-model="selecttextDX2"
            placeholder=" "
            style="width: 90px; margin: 0 10px"
          >
            <el-option
              v-for="item in popArrDX2"
              :key="item.id"
              :label="item.provinceName"
              :value="item.provinceCode"
            />
          </el-select>

          <!-- 专业 -->
          <el-select
            :popper-options="{
              modifiers: [
                { name: 'computeStyles', options: { adaptive: false } },
              ],
            }"
            no-data-text="暂无数据"
            @change="subjectChange('c', selecttextDX3)"
            v-model="selecttextDX3"
            placeholder=" "
            style="width: 90px; margin: 0 10px"
          >
            <el-option
              v-for="item in popArrDX3"
              :key="item"
              :label="item"
              :value="item"
            />
          </el-select>

          <!-- 本科/专科 -->
          <el-select
            :popper-options="{
              modifiers: [
                { name: 'computeStyles', options: { adaptive: false } },
              ],
            }"
            no-data-text="暂无数据"
            v-model="selecttextDX4"
            placeholder=" "
            @change="levelChange('c', selecttextDX4)"
            style="width: 90px"
          >
            <el-option
              v-for="item in popArrDX4"
              :key="item"
              :label="item"
              :value="item"
            />
          </el-select>

          <!-- 分数 -->
          <div class="input">
            <el-input
              class="input-item"
              v-model="minscore"
              style="width: 240px"
              maxlength="3"
              onkeyup="value=(value.replace(/\D/g,'')==''?'':parseInt(value))"
            />
            <el-icon>
              <Minus />
            </el-icon>
            <el-input
              class="input-item"
              v-model="maxscore"
              style="width: 240px"
              maxlength="3"
              onkeyup="value=(value.replace(/\D/g,'')==''?'':parseInt(value))"
            />
            分
          </div>

          <!-- 搜索 -->
          <div class="search df">
            <el-input
              v-model="keywords1"
              style="width: 240px"
              placeholder="请输入院校/招生方向名称"
              @keyup.enter="keyDown(1, $event)"
              clearable
            />
            <el-button type="primary" @click="getSchoolScorelineList"
              >搜索</el-button
            >
          </div>

          <div
            class="row alitem curr"
            style="font-size: 15px; color: #333"
            @click="isShowProvinceFilter = !isShowProvinceFilter"
          >
            <el-badge
              :value="selProvinceIds[0] == '0' ? '' : selProvinceIds.length"
              class="item"
              >省份筛选</el-badge
            >
            &nbsp;
            <el-icon>
              <ArrowDown v-if="!isShowProvinceFilter" />
              <ArrowUp v-else />
            </el-icon>
          </div>
        </div>

        <!-- 省 -->
        <div v-show="isShowProvinceFilter" class="row flexwrap provinceChoose">
          <div
            v-for="(name, key, index) in provincelist"
            class="curr province-item"
            :class="isSelectProvinceItem(key) ? 'province-item-sel' : ''"
            @click="onClickProvinceItem(name, key)"
          >
            <div>{{ name }}</div>
          </div>
        </div>

        <!-- 占位 -->
        <div v-if="isShowProvinceFilter" class="placeholder"></div>

        <!-- 固定表头，单独写一个 -->
        <div
          class="table"
          :class="isShowProvinceFilter ? 'isPlaceholder' : 'noPlaceholder'"
          :style="{ width: contentWidth != 0 ? contentWidth : planTitleWidth }"
        >
          <div class="row plan-major-title">
            <div style="width: 30%; padding: 0 12px">院校及招生方向</div>
            <div style="width: 10%; padding: 0 12px">选考要求</div>
            <div style="width: 10%; padding: 0 12px">批次/段</div>
            <div style="width: 10%; padding: 0 12px">
              <div class="curr alitem" @click="onClickSort(0)">
                <div>录取数</div>
                <el-icon
                  size="14px"
                  :class="sortType == 0 && !sortUp ? 'sort-selcolor' : ''"
                >
                  <SortDown />
                </el-icon>
                <el-icon
                  size="14px"
                  :class="sortType == 0 && sortUp ? 'sort-selcolor' : ''"
                  style="margin-left: -8px"
                >
                  <SortUp />
                </el-icon>
              </div>
            </div>
            <div style="width: 10%; padding: 0 12px">
              <div class="curr alitem" @click="onClickSort(1)">
                <div>平均分</div>
                <el-icon
                  size="14px"
                  :class="sortType == 1 && !sortUp ? 'sort-selcolor' : ''"
                >
                  <SortDown />
                </el-icon>
                <el-icon
                  size="14px"
                  :class="sortType == 1 && sortUp ? 'sort-selcolor' : ''"
                  style="margin-left: -8px"
                >
                  <SortUp />
                </el-icon>
              </div>
            </div>
            <div style="width: 10%; padding: 0 12px">
              <div class="curr alitem" @click="onClickSort(2)">
                <div>最高分</div>
                <el-icon
                  size="14px"
                  :class="sortType == 2 && !sortUp ? 'sort-selcolor' : ''"
                >
                  <SortDown />
                </el-icon>
                <el-icon
                  size="14px"
                  :class="sortType == 2 && sortUp ? 'sort-selcolor' : ''"
                  style="margin-left: -8px"
                >
                  <SortUp />
                </el-icon>
              </div>
            </div>
            <div style="width: 10%; padding: 0 12px">
              <div class="curr alitem" @click="onClickSort(3)">
                <div>最低分</div>
                <el-icon
                  size="14px"
                  :class="sortType == 3 && !sortUp ? 'sort-selcolor' : ''"
                >
                  <SortDown />
                </el-icon>
                <el-icon
                  size="14px"
                  :class="sortType == 3 && sortUp ? 'sort-selcolor' : ''"
                  style="margin-left: -8px"
                >
                  <SortUp />
                </el-icon>
              </div>
            </div>
            <div style="width: 10%; padding: 0 12px">
              <div class="curr alitem" @click="onClickSort(4)">
                <div>最低位次</div>
                <el-icon
                  size="14px"
                  :class="sortType == 4 && !sortUp ? 'sort-selcolor' : ''"
                >
                  <SortDown />
                </el-icon>
                <el-icon
                  size="14px"
                  :class="sortType == 4 && sortUp ? 'sort-selcolor' : ''"
                  style="margin-left: -8px"
                >
                  <SortUp />
                </el-icon>
              </div>
            </div>
          </div>
        </div>

        <!-- 表格 -->
        <div class="el-table" ref="contentRef">
          <el-table
            :data="tableData1"
            style="width: 100%"
            v-loading="loading1"
            :show-header="false"
          >
            <el-table-column
              prop="collegeNameText"
              label="院校及招生方向"
              width="400"
            >
              <template #default="scope">
                <p>
                  {{ scope.row.collegeNameText }}
                </p>
                <p class="message">
                  {{ scope.row.message }}
                </p>
              </template>
            </el-table-column>
            <el-table-column label="选考要求">
              <template #default="scope">
                <div>
                  {{ scope.row.course }} + {{ scope.row.uChooseSubjectText }}
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="batch" label="批次/段" />

            <el-table-column prop="EnterNum">
              <template #default="scope">
                {{ scope.row.enterNum || scope.row.uEnterNum || '-' }}
              </template>
            </el-table-column>
            <el-table-column prop="MaxScore">
              <template #default="scope">
                {{ scope.row.avgScore || scope.row.uAvgScore || '-' }}
              </template>
            </el-table-column>
            <el-table-column prop="MaxScore">
              <template #default="scope">
                {{ scope.row.maxScore || scope.row.uMaxScore || '-' }}
              </template>
            </el-table-column>
            <el-table-column prop="MinScore">
              <template #default="scope">
                {{ scope.row.minScore || scope.row.uMinScore || '-' }}
              </template>
            </el-table-column>
            <el-table-column prop="MinRank">
              <template #default="scope">
                {{ scope.row.minRank || scope.row.uMinRank || '-' }}
              </template>
            </el-table-column>
          </el-table>

          <!-- 分页 -->
          <div class="right" style="margin-top: 20px">
            <el-pagination
              v-model:current-page="pageData1.page"
              v-model:page-size="pageData1.pageSize"
              :page-sizes="[5, 10, 20, 50]"
              layout="total, sizes, prev, pager, next, jumper"
              :total="pageData1.total"
              @size-change="getSchoolScorelineList"
              @current-change="getSchoolScorelineList"
            />
          </div>

          <!-- 提示 -->
          <div class="uzy-tzy-tip-instruction">
            <div class="el-row">
              <span class="titleBox">
                <div class="df">
                  <el-icon class="iconBox">
                    <WarningFilled />
                  </el-icon>
                  <h6>重要提示：</h6>
                </div>
                <div
                  class="dataDescription"
                  v-html="pclDescription"
                  style="white-space: pre-wrap"
                ></div>
              </span>
            </div>
          </div>
        </div>
      </el-tab-pane>

      <!-- 专业分数线 -->
      <el-tab-pane label="专业分数线" name="second">
        <div class="select-box select-box-1">
          <!-- 年份 -->
          <el-select
            :popper-options="{
              modifiers: [
                { name: 'computeStyles', options: { adaptive: false } },
              ],
            }"
            no-data-text="暂无数据"
            v-model="selecttextDX5"
            placeholder=" "
            @change="yearChange('p', selecttextDX5)"
            style="width: 90px"
          >
            <el-option
              v-for="item in popArrDX5"
              :key="item"
              :label="item"
              :value="item"
            />
          </el-select>

          <!-- 省份 -->
          <el-select
            :popper-options="{
              modifiers: [
                { name: 'computeStyles', options: { adaptive: false } },
              ],
            }"
            no-data-text="暂无数据"
            @change="provinceChange('p', selecttextDX6)"
            v-model="selecttextDX6"
            placeholder=" "
            style="width: 90px; margin: 0 10px"
          >
            <el-option
              v-for="item in popArrDX6"
              :key="item.id"
              :label="item.provinceName"
              :value="item.provinceCode"
            />
          </el-select>

          <!-- 专业 -->
          <el-select
            :popper-options="{
              modifiers: [
                { name: 'computeStyles', options: { adaptive: false } },
              ],
            }"
            no-data-text="暂无数据"
            @change="subjectChange('p', selecttextDX7)"
            v-model="selecttextDX7"
            placeholder=" "
            style="width: 90px; margin: 0 10px"
          >
            <el-option
              v-for="item in popArrDX7"
              :key="item"
              :label="item"
              :value="item"
            />
          </el-select>

          <!-- 本科/专科 -->
          <el-select
            :popper-options="{
              modifiers: [
                { name: 'computeStyles', options: { adaptive: false } },
              ],
            }"
            no-data-text="暂无数据"
            v-model="selecttextDX8"
            placeholder=" "
            @change="levelChange('p', selecttextDX8)"
            style="width: 90px"
          >
            <el-option
              v-for="item in popArrDX8"
              :key="item"
              :label="item"
              :value="item"
            />
          </el-select>

          <!-- 搜索 -->
          <div class="search">
            <el-input
              v-model="keywords2"
              style="width: 240px"
              placeholder="请输入招生专业名称"
              @keyup.enter="keyDown(2, $event)"
              clearable
            />
            <el-button type="primary" @click="getMajorScorelineList"
              >搜索</el-button
            >
          </div>

          <div
            class="row alitem curr"
            style="font-size: 15px; color: #333"
            @click="isShowProvinceFilter = !isShowProvinceFilter"
          >
            <el-badge
              :value="selProvinceIds[0] == '0' ? '' : selProvinceIds.length"
              class="item"
              >省份筛选</el-badge
            >
            &nbsp;
            <el-icon>
              <ArrowDown v-if="!isShowProvinceFilter" />
              <ArrowUp v-else />
            </el-icon>
          </div>
        </div>

        <!-- 省 -->
        <div
          v-show="isShowProvinceFilter"
          class="row flexwrap provinceChoose"
          style="margin-bottom: 15px"
        >
          <div
            v-for="(name, key, index) in provincelist"
            class="curr province-item"
            :class="isSelectProvinceItem(key) ? 'province-item-sel' : ''"
            @click="onClickProvinceItem(name, key)"
          >
            <div>{{ name }}</div>
          </div>
        </div>

        <!-- 占位 -->
        <div v-if="isShowProvinceFilter" class="placeholder"></div>

        <!-- 固定表头，单独写一个 -->
        <div
          class="table"
          :class="isShowProvinceFilter ? 'isPlaceholder' : 'noPlaceholder'"
          :style="{ width: contentWidth != 0 ? contentWidth : planTitleWidth }"
        >
          <div class="row plan-major-title">
            <div style="width: 31%; padding: 0 12px">院校及招生方向</div>
            <div style="width: 12%; padding: 0 12px">招生专业</div>
            <div style="width: 11%; padding: 0 12px">
              <div class="curr alitem" @click="onClickSort(0)">
                <div>录取数</div>
                <el-icon
                  size="14px"
                  :class="sortType == 0 && !sortUp ? 'sort-selcolor' : ''"
                >
                  <SortDown />
                </el-icon>
                <el-icon
                  size="14px"
                  :class="sortType == 0 && sortUp ? 'sort-selcolor' : ''"
                  style="margin-left: -8px"
                >
                  <SortUp />
                </el-icon>
              </div>
            </div>
            <div style="width: 12%; padding: 0 12px">
              <div class="curr alitem" @click="onClickSort(1)">
                <div>平均分</div>
                <el-icon
                  size="14px"
                  :class="sortType == 1 && !sortUp ? 'sort-selcolor' : ''"
                >
                  <SortDown />
                </el-icon>
                <el-icon
                  size="14px"
                  :class="sortType == 1 && sortUp ? 'sort-selcolor' : ''"
                  style="margin-left: -8px"
                >
                  <SortUp />
                </el-icon>
              </div>
            </div>
            <div style="width: 11%; padding: 0 12px">
              <div class="curr alitem" @click="onClickSort(2)">
                <div>最高分</div>
                <el-icon
                  size="14px"
                  :class="sortType == 2 && !sortUp ? 'sort-selcolor' : ''"
                >
                  <SortDown />
                </el-icon>
                <el-icon
                  size="14px"
                  :class="sortType == 2 && sortUp ? 'sort-selcolor' : ''"
                  style="margin-left: -8px"
                >
                  <SortUp />
                </el-icon>
              </div>
            </div>
            <div style="width: 12%; padding: 0 12px">
              <div class="curr alitem" @click="onClickSort(3)">
                <div>最低分</div>
                <el-icon
                  size="14px"
                  :class="sortType == 3 && !sortUp ? 'sort-selcolor' : ''"
                >
                  <SortDown />
                </el-icon>
                <el-icon
                  size="14px"
                  :class="sortType == 3 && sortUp ? 'sort-selcolor' : ''"
                  style="margin-left: -8px"
                >
                  <SortUp />
                </el-icon>
              </div>
            </div>
            <div style="width: 10%; padding: 0 12px">
              <div class="curr alitem" @click="onClickSort(4)">
                <div>最低位次</div>
                <el-icon
                  size="14px"
                  :class="sortType == 4 && !sortUp ? 'sort-selcolor' : ''"
                >
                  <SortDown />
                </el-icon>
                <el-icon
                  size="14px"
                  :class="sortType == 4 && sortUp ? 'sort-selcolor' : ''"
                  style="margin-left: -8px"
                >
                  <SortUp />
                </el-icon>
              </div>
            </div>
          </div>
        </div>

        <!-- 表格 -->
        <div class="el-table" ref="contentRef">
          <el-table
            :data="tableData2"
            style="width: 100%"
            v-loading="loading2"
            :show-header="false"
          >
            <el-table-column
              prop="collegeNameText"
              label="院校及招生方向"
              width="400"
            >
              <template #default="scope">
                <p>
                  {{ scope.row.collegeNameText }}
                </p>
                <p class="message">
                  {{ scope.row.message }}
                </p>
              </template>
            </el-table-column>

            <el-table-column prop="professionName" label="招生专业">
              <template #default="scope">
                {{ scope.row.professionName }} {{ scope.row.remark }}
              </template>
            </el-table-column>
            <el-table-column prop="EnterNum">
              <template #default="scope">
                {{ scope.row.enterNum || scope.row.uEnterNum || '-' }}
              </template>
            </el-table-column>
            <el-table-column prop="MaxScore">
              <template #default="scope">
                {{ scope.row.avgScore || scope.row.uAvgScore || '-' }}
              </template>
            </el-table-column>
            <el-table-column prop="MaxScore">
              <template #default="scope">
                {{ scope.row.maxScore || scope.row.uMaxScore || '-' }}
              </template>
            </el-table-column>
            <el-table-column prop="MinScore">
              <template #default="scope">
                {{ scope.row.minScore || scope.row.uMinScore || '-' }}
              </template>
            </el-table-column>
            <el-table-column prop="MinRank">
              <template #default="scope">
                {{ scope.row.minRank || scope.row.uMinRank || '-' }}
              </template>
            </el-table-column>
          </el-table>
        </div>

        <!-- 分页 -->
        <div class="right" style="margin-top: 20px">
          <el-pagination
            v-model:current-page="pageData2.page"
            v-model:page-size="pageData2.pageSize"
            :page-sizes="[5, 10, 20, 50]"
            layout="total, sizes, prev, pager, next, jumper"
            :total="pageData2.total"
            @size-change="getMajorScorelineList"
            @current-change="getMajorScorelineList"
          />
        </div>

        <!-- 提示 -->
        <div class="uzy-tzy-tip-instruction">
          <div class="el-row">
            <span class="titleBox">
              <div class="df">
                <el-icon class="iconBox">
                  <WarningFilled />
                </el-icon>
                <h6>重要提示：</h6>
              </div>

              <div
                class="dataDescription"
                v-html="pclDescription"
                style="white-space: pre-wrap"
              ></div>
            </span>
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import {
  schoolScoreline,
  majorScoreline,
  getNoteDesc,
  getSchoolScorelineFilter,
} from '@/api/appv2/appv2';

import { searchSchoolFilter } from '@/api/appv2/appv1';

// 院校分数线
const popArrDX1 = ref([]);
const popArrDX2 = ref([]);
const popArrDX3 = ref([]);
const popArrDX4 = ref([]);
const selecttextDX1 = ref('');
const selecttextDX2 = ref('');
const selecttextDX3 = ref('');
const selecttextDX4 = ref('');
const resFilter1 = ref([]);
const minscore = ref('');
const maxscore = ref('');
const keywords1 = ref('');
const tableData1 = ref([]);
const loading1 = ref(false);
const pageData1 = reactive({
  page: 1,
  pageSize: 10,
  total: 0,
});

// 专业分数线
const popArrDX5 = ref([]);
const popArrDX6 = ref([]);
const popArrDX7 = ref([]);
const popArrDX8 = ref([]);
const selecttextDX5 = ref('');
const selecttextDX6 = ref('');
const selecttextDX7 = ref('');
const selecttextDX8 = ref('');
const resFilter2 = ref([]);
const keywords2 = ref('');
const tableData2 = ref([]);
const loading2 = ref(false);
const pageData2 = reactive({
  page: 1,
  pageSize: 10,
  total: 0,
});

// 计算单独写的表头的宽度
const contentRef = ref(null);
const contentWidth = ref(0);
const planTitleWidth = ref('');
const handleResize = () => {
  if (contentRef.value) {
    contentWidth.value = contentRef.value.offsetWidth + 'px';
  }

  // 获取当前窗口宽度
  let width = window.innerWidth;
  // 根据不同的宽度范围设置 drawerSize 的值
  if (width > 2000) {
    planTitleWidth.value = '60%';
  } else if (width > 1800) {
    planTitleWidth.value = '67.5%';
  } else if (width > 1600) {
    planTitleWidth.value = '77.7%';
  } else if (width > 1400) {
    planTitleWidth.value = '86.5%';
  } else {
    planTitleWidth.value = '96%';
  }
};

// 移除之前可能存在的同名监听器
window.removeEventListener('resize', handleResize);
// 添加 resize 事件监听器
window.addEventListener('resize', handleResize);
// 初始调用一次
handleResize();

onUnmounted(() => {
  window.removeEventListener('resize', handleResize);
});

// 院校分数线年份
const CollegeAllYearData = ref([]);
// 专业分数线年份
const ProfessionAllYearData = ref([]);

const activeName = ref('first');

const isShowProvinceFilter = ref(false);
const provincelist = ref([]);
const selProvinceIds = ref(['0']);

const sortType = ref(-1);
const sortUp = ref(false);

const sortTypeMajor = ref(-1);
const sortUpMajor = ref(false);

/**
 * @param {Numver} type 类型 0-录取数 1-平均分 2-最高分 3-最低分 4-最低位次
 * 院校排序
 */
function onClickSort(type) {
  if (sortType.value == type) {
    sortUp.value = !sortUp.value;
  } else {
    sortType.value = type;
    sortUp.value = false;
  }

  getSchoolScorelineList();
}

getSearchDate();
/**
 * 获取院校筛选数据
 */
function getSearchDate() {
  searchSchoolFilter({
    fronttype: '3',
  }).then((res) => {
    provincelist.value = res.data.province; // 省份
  });
}

function onClickProvinceItem(name, id) {
  if (id == 0 && selProvinceIds.value[0] == '0') {
    return;
  } else if (id == 0) {
    selProvinceIds.value = ['0'];
  } else {
    const index = selProvinceIds.value.findIndex((item) => item == id);

    if (index >= 0) {
      selProvinceIds.value.splice(index, 1);

      if (selProvinceIds.value.length == 0) {
        selProvinceIds.value = ['0'];
      }
    } else {
      if (selProvinceIds.value[0] == '0') {
        selProvinceIds.value = [];
      }
      selProvinceIds.value.push(id);
    }
  }

  getSchoolScorelineList();
  getMajorScorelineList();
}

function isSelectProvinceItem(id) {
  const index = selProvinceIds.value.findIndex((item) => item == id);
  return index >= 0;
}

function keyDown(type, e) {
  if (e.keyCode == 13) {
    if (type == 1) {
      getSchoolScorelineList();
    } else if (type == 2) {
      getMajorScorelineList();
    }
  }
}
const pclDescription = ref('');
const fetchNoteDesc = () => {
  getNoteDesc({ type: 'collegeScoreLineDescription', studentId: '339' }).then(
    (res) => {
      pclDescription.value = res.data.collegeScoreLineDescription;
    }
  );
};
fetchNoteDesc();
const yearChange = (type, val) => {
  // 院校
  if (type == 'c') {
    selecttextDX1.value = val;
    popArrDX3.value = resFilter1.value[0].years.filter(
      (v) => v.year == val
    )[0].course;
    selecttextDX3.value = popArrDX3.value?.[0];
    popArrDX4.value = resFilter1.value[0].years.filter(
      (v) => v.year == val
    )[0]?.batch;
    selecttextDX4.value = popArrDX4.value?.[0];
    getSchoolScorelineList();
  }
  // 专业
  else if (type == 'p') {
    selecttextDX5.value = val;
    popArrDX7.value = resFilter2.value[0].years.filter(
      (v) => v.year == val
    )[0].course;
    selecttextDX7.value = popArrDX7.value[0];
    popArrDX8.value = resFilter2.value[0].years.filter(
      (v) => v.year == val
    )[0].batch;
    selecttextDX8.value = popArrDX8.value?.[0];
    getMajorScorelineList();
  }
};
const provinceChange = (type, val) => {
  localStorage.setItem('provinceId', val);
  // 院校
  if (type == 'c') {
    selecttextDX6.value = val;

    resFilter1.value = CollegeAllYearData.value.filter(
      (v) => v.provinceCode == val
    );
    resFilter1.value[0].years.forEach((v) => {
      popArrDX1.value.push(v.year);
    });
    popArrDX1.value = [...new Set(popArrDX1.value)];
    selecttextDX1.value = popArrDX1.value[0];
    popArrDX3.value = resFilter1.value[0].years.filter(
      (v) => v.year == selecttextDX1.value
    )?.[0]?.course;
    selecttextDX3.value = popArrDX3.value?.[0];
    popArrDX4.value = resFilter1.value[0].years.filter(
      (v) => v.year == selecttextDX1.value
    )[0]?.batch;
    selecttextDX4.value = popArrDX4.value?.[0];

    // 修改院校省份，专业后面的专业和学位也得变化
    popArrDX7.value = resFilter1.value[0].years.filter(
      (v) => v.year == selecttextDX5.value
    )?.[0]?.course;
    selecttextDX7.value = popArrDX7.value?.[0];
    popArrDX8.value = resFilter1.value[0].years.filter(
      (v) => v.year == selecttextDX5.value
    )?.[0]?.batch;
    selecttextDX8.value = popArrDX8.value?.[0];

    getSchoolScorelineList();
  }
  // 专业
  else if (type == 'p') {
    selecttextDX2.value = val;

    resFilter2.value = ProfessionAllYearData.value.filter(
      (v) => v.provinceCode == val
    );
    resFilter2.value[0].years.forEach((v) => {
      popArrDX5.value.push(v.year);
    });
    popArrDX5.value = [...new Set(popArrDX5.value)];
    selecttextDX5.value = popArrDX5.value[0];
    popArrDX7.value = resFilter2.value[0].years.filter(
      (v) => v.year == selecttextDX5.value
    )[0]?.course;
    selecttextDX7.value = popArrDX7.value?.[0];
    popArrDX8.value = resFilter2.value[0].years.filter(
      (v) => v.year == selecttextDX5.value
    )[0]?.batch;
    selecttextDX8.value = popArrDX8.value?.[0];

    // 修改专业省份，院校后面的专业和学位也得变化
    popArrDX3.value = resFilter2.value[0].years.filter(
      (v) => v.year == selecttextDX1.value
    )?.[0]?.course;
    selecttextDX3.value = popArrDX3.value?.[0];
    popArrDX4.value = resFilter2.value[0].years.filter(
      (v) => v.year == selecttextDX1.value
    )?.[0]?.batch;
    selecttextDX4.value = popArrDX4.value?.[0];
    getMajorScorelineList();
  }
};
const subjectChange = (type, val) => {
  // 院校
  if (type == 'c') {
    selecttextDX3.value = val;
    getSchoolScorelineList();
  }
  // 专业
  else if (type == 'p') {
    selecttextDX7.value = val;
    getMajorScorelineList();
  }
};
const levelChange = (type, val) => {
  // 院校
  if (type == 'c') {
    selecttextDX4.value = val;
    getSchoolScorelineList();
  }
  // 专业
  else if (type == 'p') {
    selecttextDX8.value = val;
    getMajorScorelineList();
  }
};
const handleClick = (tab) => {
  setTimeout(() => {
    if (!!tab) {
      if (tab.props.label == '院校分数线') {
        getSchoolScorelineList();
      } else if (tab.props.label == '专业分数线') {
        getMajorScorelineList();
      }
    } else {
      if (activeName.value == 'first') {
        getSchoolScorelineList();
      } else {
        getMajorScorelineList();
      }
    }
  }, 500);
};

// const sortTypes = ["EnterNum_order", "avgScore_order", "MaxScore_order", "MinScore_order", "MinRank_order"]
// 院校分数线列表
function getSchoolScorelineList() {
  loading1.value = true;
  let data = {
    pid: selecttextDX2.value,
    year: selecttextDX1.value,
    course: selecttextDX3.value,
    batch: selecttextDX4.value,
    minscore: minscore.value,
    maxscore: maxscore.value,
    keywords: keywords1.value,
    s_pid: selProvinceIds.value.join(','),
  };

  if (sortType.value != -1) {
    data.sort_type = sortType.value;
    data.is_sort = sortUp.value ? 2 : 1;
  }

  schoolScoreline({ ...pageData1, ...data })
    .then((res) => {
      if (res.code == 20000) {
        for (const v of res.data.data) {
          v.message =
            v.features.join(' ') +
            v.categories.join(' ') +
            ' |' +
            v.artFeatures.join(' ') +
            ' ' +
            v.natureType;
        }
        tableData1.value = res.data.data;
        pageData1.page = res.data.current_page;
        pageData1.pageSize = res.data.per_page;
        pageData1.total = res.data.total;
      } else {
        loading1.value = false;
      }
      loading1.value = false;
    })
    .catch(() => {
      tableData1.value = [];
      pageData1.total = 0;
      loading1.value = false;
    });
}

// 专业分数线列表
function getMajorScorelineList() {
  loading2.value = true;
  let data = {
    pid: selecttextDX6.value,
    year: selecttextDX5.value,
    course: selecttextDX7.value,
    batch: selecttextDX8.value,
    keywords: keywords2.value,
    s_pid: selProvinceIds.value.join(','),
  };

  if (sortTypeMajor.value != -1) {
    data.sort_type = sortTypeMajor.value;
    data.is_sort = sortUpMajor.value ? 2 : 1;
  }

  majorScoreline({ ...pageData2, ...data })
    .then((res) => {
      if (res.code == 20000) {
        for (const v of res.data.data) {
          v.message =
            v.features.join(' ') +
            v.categories.join(' ') +
            ' |' +
            v.artFeatures.join(' ') +
            ' ' +
            v.natureType;
        }
        tableData2.value = res.data.data;
        pageData2.page = res.data.current_page;
        pageData2.pageSize = res.data.per_page;
        pageData2.total = res.data.total;
      } else {
        loading2.value = false;
      }
      loading2.value = false;
    })
    .catch(() => {
      loading2.value = false;
      pageData2.total = 0;
      tableData2.value = [];
    });
}

const fetchSchoolScorelineFilter = () => {
  getSchoolScorelineFilter().then((res) => {
    if (res.code == 20000) {
      // 院校分数线
      popArrDX1.value = [];
      popArrDX2.value = [];
      popArrDX3.value = [];
      popArrDX4.value = [];
      CollegeAllYearData.value = res.data;
      popArrDX2.value = res.data;

      // 专业分数线
      popArrDX5.value = [];
      popArrDX6.value = [];
      popArrDX7.value = [];
      popArrDX8.value = [];
      ProfessionAllYearData.value = res.data;
      popArrDX6.value = res.data;
      // 看仓库有没有省份id
      if (
        localStorage.getItem('provinceId') &&
        popArrDX6.value.some(
          (obj) => obj.provinceCode == localStorage.getItem('provinceId')
        )
      ) {
        resFilter1.value = res.data.filter(
          (v) => v.provinceCode == localStorage.getItem('provinceId')
        );
        resFilter2.value = res.data.filter(
          (v) => v.provinceCode == localStorage.getItem('provinceId')
        );
        popArrDX3.value = resFilter1.value[0].years[0].course;
        popArrDX4.value = resFilter1.value[0].years[0].batch;

        selecttextDX2.value = Number(localStorage.getItem('provinceId'));
        selecttextDX3.value = popArrDX3.value[0] || '';
        selecttextDX4.value = popArrDX4.value[0] || '';

        let result = CollegeAllYearData.value.filter(
          (v) => v.provinceCode == selecttextDX2.value
        );
        result[0].years.forEach((item) => {
          popArrDX1.value.push(item.year);
          popArrDX5.value.push(item.year);
        });
        selecttextDX1.value = popArrDX1.value[0] || '';

        popArrDX7.value = resFilter2.value[0].years[0].course;
        popArrDX8.value = resFilter2.value[0].years[0].batch;
        selecttextDX5.value = popArrDX5.value[0] || '';
        selecttextDX6.value = Number(localStorage.getItem('provinceId'));
        selecttextDX7.value = popArrDX7.value[0] || '';
        selecttextDX8.value = popArrDX8.value[0] || '';
      } else {
        resFilter1.value = [res.data[0]];
        resFilter2.value = [res.data[0]];

        popArrDX3.value = res.data[0].years[0].course;
        popArrDX4.value = res.data[0].years[0].batch;

        selecttextDX2.value = popArrDX2.value[0].provinceCode || '';
        selecttextDX3.value = popArrDX3.value[0] || '';
        selecttextDX4.value = popArrDX4.value[0] || '';

        let result = CollegeAllYearData.value.filter(
          (v) => v.provinceCode == selecttextDX2.value
        );
        result[0].years.forEach((item) => {
          popArrDX1.value.push(item.year);
          popArrDX5.value.push(item.year);
        });
        selecttextDX1.value = popArrDX1.value[0] || '';

        popArrDX7.value = res.data[0].years[0].course;
        popArrDX8.value = res.data[0].years[0].batch;
        selecttextDX5.value = popArrDX5.value[0] || '';
        selecttextDX6.value = popArrDX6.value[0].provinceCode || '';
        selecttextDX7.value = popArrDX7.value[0] || '';
        selecttextDX8.value = popArrDX8.value[0] || '';
      }

      getSchoolScorelineList();
    }
  });
};
fetchSchoolScorelineFilter();

function setActiveName(val) {
  activeName.value = val || 'first';
  handleClick();
}

defineExpose({
  setActiveName,
});
</script>

<style lang="scss" scoped>
::v-deep(.el-tabs__header) {
  position: sticky;
  // top: -20px;
  top: 0;
  z-index: 2;
  background-color: white;
}

.el-table {
  margin-top: 50px;
}

.table {
  margin-top: 80px;
  position: fixed;
  z-index: 100;
}

.isPlaceholder {
  top: 180px;
}

.noPlaceholder {
  top: 100px;
}

.provinceChoose {
  position: fixed;
  top: 190px;
  margin-bottom: 15px;
  z-index: 100;
  background-color: #fff;
}

.placeholder {
  height: 100px;
}

.select-box-1 {
  position: fixed;
  top: 120px;
  width: 100%;
  z-index: 100;
  background-color: #fff;
}

.plan-major-title {
  font-size: 14px;
  color: #333;
  padding: 15px 0;
  background-color: #f7f7f8;
}

.message {
  color: #bcc3cc;
  font-size: 12px;
}

.select-box {
  display: flex;
  flex-direction: row;
  padding: 20px 0;
}

.input {
  display: flex;
  flex-direction: row;
  margin: 0 10px;
  line-height: 32px;
  align-items: center;

  .input-item {
    width: 60px !important;
    margin: 0 10px;
  }
}

.search {
  margin: 0 30px;
}

.uzy-tzy-tip-instruction {
  font-size: 12px;
  color: #ff7d00;
  margin: 30px 0;
  line-height: 20px;
  width: 100%;
  border-radius: 3px;
  background: #fff7e8;
  padding: 10px;

  .el-row {
    display: flex;
    flex-direction: row;
    align-items: center;

    .el-icon {
      font-size: 20px;
      color: #ff7d00;
      margin-right: 20px;
    }

    .titleBox {
      font-size: 14px;
      font-weight: 400;
      color: #ff7d00;
      line-height: 22px;

      h6 {
        line-height: 20px;
        font-size: 14px;
        margin-bottom: 4px;
      }
    }
  }
}

.province-item {
  color: #444;
  font-size: 14.5px;
  padding: 2px 10px;
  border: 1px #999 solid;
  margin: 0 0 10px 10px;
  border-radius: 5px;
}

.province-item-sel {
  color: #409eff;
  border: 1px #409eff solid;
}

.sort-selcolor {
  color: #409eff;
}
</style>
